<template>
  <div>
    <ListContainer title="地方拼团设置列表"
                   ref="SettingList"
                   resource-uri="group/setting"
                   resource-name="setting"
                   :params="params"
                   v-on:fetched="onFetched">

      <div slot="filters" style="padding-bottom: 1rem">
        <el-button @click="addResource" type="primary" size="mini">添加拼团设置</el-button>
      </div>

      <div slot="items">
        <div class="filter-container">
          <RegionAddress ref="RegionAddress"
                         class="region-address"
                         @provinceChanged="onProvinceChanged"
                         @cityChanged="onCityChanged"
                         @districtChanged="onDistrictChanged">
          </RegionAddress>
          <el-button size="small" @click="onSearch">搜索</el-button>
          <el-button size="small" @click="onReset">重置</el-button>
        </div>
        <el-table
          :data="items"
          border
          style="width: 100%">
          <el-table-column
            prop="id"
            label="编号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="拼团名称">
          </el-table-column>
          <el-table-column
            prop="creatime"
            width="180"
            label="创建时间">
            <template scope="scope">
              {{scope.row.creatime|formatDatetime}}
            </template>
          </el-table-column>
          <el-table-column
            prop="male_free_nums"
            width="140"
            label="男（免费数量）">
          </el-table-column>
          <el-table-column
            prop="female_free_nums"
            width="140"
            label="女（免费数量）">
          </el-table-column>
          <el-table-column
            prop="being_group_nums"
            width="100"
            label="成团人员">
          </el-table-column>
          <el-table-column
            prop="price"
            width="100"
            label="价格">
          </el-table-column>
          <el-table-column
            prop="id"
            width="80"
            label="操作">
            <template scope="scope">
              <router-link :to="{ name: 'group_setting.edit', params: { setting_id: scope.row.id }}">
                <el-button type="text" size="small">修改</el-button>
              </router-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </ListContainer>

  </div>
</template>

<script>
  import ListContainer from '../ListContainer.vue'
  import RegionAddress from '../Address/Address.vue'
  import Moment from 'moment'

  export default {
    data () {
      return {
        items: [],
        params: null,
        filterParams: {
          province_region_id: null,
          city_region_id: null,
          district_region_id: null
        }
      }
    },
    filters: {
      formatDatetime (unix) {
        return Moment(unix, 'X').format('YYYY-MM-DD HH:mm:ss')
      }
    },
    components: {
      ListContainer,
      RegionAddress
    },
    methods: {
      onFetched: function (data) {
        this.items = data
      },
      addResource () {
        this.$router.push({name: 'group_setting.add'})
      },
      onProvinceChanged (value) {
        this.filterParams.province_region_id = value
      },
      onCityChanged (value) {
        this.filterParams.city_region_id = value
      },
      onDistrictChanged (value) {
        this.filterParams.district_region_id = value
      },
      onSearch () {
        if (this.filterParams.province_region_id || this.filterParams.city_region_id || this.filterParams.district_region_id) {
          let params = {}
          for (let key of Object.keys(this.filterParams)) {
            if (this.filterParams[key] && this.filterParams[key] !== null) {
              params[key] = this.filterParams[key]
            }
          }
          this.params = params
        }
      },
      onReset () {
        if (this.filterParams.province_region_id || this.filterParams.city_region_id || this.filterParams.district_region_id) {
          this.$refs.RegionAddress.regionValue.province = null
          this.params = null
        }
      }
    }
  }
</script>

<style lang="css" scoped="scoped">
  .filter-container {
    display: inline-block;
    margin-bottom: 5px;
  }
  .region-address {
    display: inline-block;
    margin-right: 10px;
  }
  .el-button + .el-button {
    margin-left: 0;
  }
</style>
